<template>
    <div>
        <Row>
            <Col span="24">
                <Card>
                    <Dropdown placement="bottom-start" trigger="click" style="margin-left: 20px">
                        <Button type="primary">
                            新建连接
                            <Icon type="ios-arrow-down"></Icon>
                        </Button>
                        <DropdownMenu slot="list">
                            <DropdownItem>Mysql</DropdownItem>
                            <DropdownItem disabled>Oracle</DropdownItem>
                            <DropdownItem disabled>SQL Server</DropdownItem>
                            <DropdownItem disabled>PostgreSql</DropdownItem>
                            <DropdownItem disabled>北京烤鸭</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </Card>
            </Col>
        </Row>
        <Row>
            <Col span="6">
                <Menu @on-select="onSelect" @on-open-change="onOpenChange" accordion>
                    <template v-for="db in database_list">
                        <Submenu :name="db.id">
                            <template slot="title">
                                <Icon type="ios-paper" />
                                {{db.name}}
                            </template>
                            <MenuItem name="3-1">Option 7</MenuItem>
                        </Submenu>
                    </template>
                </Menu>
            </Col>
            <Col span="18">
                <Tabs>
                    <TabPane label="all table" icon="logo-apple">
                        <Card>
                            <Table @on-row-dblclick="onRowDblClick" size="small" border :columns="columns_all" :data="data_all"></Table>
                        </Card>
                    </TabPane>
                    <TabPane label="user table" icon="logo-apple">
                        <Card>
                            <Table size="small" border :columns="columns_one" :data="data_one"></Table>
                        </Card>
                    </TabPane>
                    <TabPane label="Linux" icon="search">
                        <Card>
                            <Button @click="runSql()">RUN</Button>
                            <Input v-model="strSql" type="textarea" :rows="9" />
                            <Table size="small" border :columns="columns1" :data="data1"></Table>
                        </Card>
                    </TabPane>
                </Tabs>
            </Col>
        </Row>
    </div>
</template>

<script>
    import {openNavicatDatabaseConfig} from '../assets/databaseConfig'

    var mysql = require('mysql');
    export default {
        name: "navicat",
        data () {
            return {
                columns_all: [],
                data_all: [],

                columns_one: [],
                data_one: [],

                searchSql:"",
                search_columns: [],
                search_data: [],

                strSql: "",
                columns1: [],
                data1: [],

                database_list: [],
                database_list_info: [],
                database_name: "",

            }
        },
        methods: {
            runSql() {
                var _this = this;
                // 连接数据库的配置
                var connection = mysql.createConnection({
                    // 主机名称，一般是本机
                    host: 'localhost',
                    // 数据库的端口号，如果不设置，默认是3306
                    port: 3306,
                    // 创建数据库时设置用户名
                    user: 'root',
                    // 创建数据库时设置的密码
                    password: '123456',
                    // 创建的数据库
                    database: 'gnerv-business'
                });
                // 与数据库建立连接
                connection.connect();
                // 查询数据库
                connection.query(_this.strSql, function (err, result) {
                    if (err) {
                        console.log(err.message());
                        return;
                    }
                    debugger
                    if(result.length > 0) {
                        _this.columns1 = [];
                        for (var i = 0; i < 1; i++) {
                            let keys = Object.keys(result[i]);
                            for (let key of keys) {
                                let j = {};
                                j.title = key;
                                j.key = key;
                                _this.columns1.push(j);
                            }
                        }
                        _this.data1 = [];
                        for (let obj of result) {
                            _this.data1.push(obj);
                        }
                    }
                    let reg = /^\d+$/;
                    if(reg.test(result.affectedRows)) {
                        _this.columns1 = [];
                        let j = {};
                        j.title = "受影响的行";
                        j.key = "count";
                        _this.columns1.push(j);
                        _this.data1 = [];
                        let k = {};
                        k.count = result.affectedRows
                        _this.data1.push(k);
                    }
                });
                // 关闭连接
                connection.end();
            },
            onOpenChange: function(name){
                var _this = this;
                console.log("name----" + _this.database_list[name])
                // 连接数据库的配置
                let database_info = _this.database_list[name];
                console.log("name----" + database_info.host)
                console.log("name----" + database_info.port)
                console.log("name----" + database_info.user)
                console.log("name----" + database_info.password)
                var connection = mysql.createConnection({
                    // 主机名称，一般是本机
                    host: database_info.host,
                    // 数据库的端口号，如果不设置，默认是3306
                    port: database_info.port,
                    // 创建数据库时设置用户名
                    user: database_info.user,
                    // 创建数据库时设置的密码
                    password: database_info.password
                });
                // 与数据库建立连接
                connection.connect();
                // 查询数据库
                var sql = "show databases;"
                connection.query(sql, function (err, result) {
                    if (err) {
                        console.log(err.message());
                        return;
                    }
                    if(result.length > 0) {
                        _this.database_list_info = [];
                        for (var i = 0; i < 1; i++) {
                            let keys = Object.keys(result[i]);
                            for (let key of keys) {
                                let j = {};
                                j.title = key;
                                j.key = key;
                                _this.database_list_info.push(j);
                            }
                        }
                    }
                });
                // 关闭连接
                connection.end();
            },
            onSelect: function(name) {
                console.log("name----" + name);
                var _this = this;
                // 连接数据库的配置
                var connection = mysql.createConnection({
                    // 主机名称，一般是本机
                    host: 'localhost',
                    // 数据库的端口号，如果不设置，默认是3306
                    port: 3306,
                    // 创建数据库时设置用户名
                    user: 'root',
                    // 创建数据库时设置的密码
                    password: '123456',
                    // 创建的数据库
                    database: name
                });
                // 查询数据库
                var sql = "show tables;"
                connection.query(sql, function (err, result) {
                    if (err) {
                        console.log(err.message());
                        return;
                    }
                    if(result.length > 0) {
                        _this.columns_all = [];
                        for (var i = 0; i < 1; i++) {
                            let keys = Object.keys(result[i]);
                            for (let key of keys) {
                                let j = {};
                                j.title = key;
                                j.key = key;
                                _this.columns_all.push(j);
                            }
                        }
                        _this.data_all = [];
                        for (let obj of result) {
                            _this.data_all.push(obj);
                        }
                    }
                    let reg = /^\d+$/;
                    if(reg.test(result.affectedRows)) {
                        _this.data_all = [];
                        let j = {};
                        j.title = "受影响的行";
                        j.key = "count";
                        _this.columns_all.push(j);
                        _this.data_all = [];
                        let k = {};
                        k.count = result.affectedRows
                        _this.data_all.push(k);
                    }
                    _this.database_name = name;
                });
                // 关闭连接
                connection.end();
            },
            onRowDblClick: function (tableName) {
                console.log("tableName----" + Object.values(tableName));
                let anies = Object.values(tableName);
                var _this = this;
                // 连接数据库的配置
                var connection = mysql.createConnection({
                    // 主机名称，一般是本机
                    host: 'localhost',
                    // 数据库的端口号，如果不设置，默认是3306
                    port: 3306,
                    // 创建数据库时设置用户名
                    user: 'root',
                    // 创建数据库时设置的密码
                    password: '123456',
                    // 创建的数据库
                    database: _this.database_name
                });
                // 与数据库建立连接
                connection.connect();
                // 查询数据库
                var sql = "select * from " + anies;
                connection.query(sql, function (err, result) {
                    if (err) {
                        console.log(err.message());
                        return;
                    }
                    if(result.length > 0) {
                        _this.columns_one = [];
                        for (var i = 0; i < 1; i++) {
                            let keys = Object.keys(result[i]);
                            for (let key of keys) {
                                let j = {};
                                j.title = key;
                                j.key = key;
                                _this.columns_one.push(j);
                            }
                        }
                        _this.data_all = [];
                        for (let obj of result) {
                            _this.data_one.push(obj);
                        }
                    }
                    let reg = /^\d+$/;
                    if(reg.test(result.affectedRows)) {
                        _this.data_one = [];
                        let j = {};
                        j.title = "受影响的行";
                        j.key = "count";
                        _this.columns_one.push(j);
                        _this.data_one = [];
                        let k = {};
                        k.count = result.affectedRows
                        _this.data_one.push(k);
                    }
                });
                // 关闭连接
                connection.end();
            },

        },
        created : function() {
            let s = openNavicatDatabaseConfig();
            let parse = JSON.parse(s);
            this.database_list = parse;
        }
    }
</script>

<style scoped>

</style>